<template>
  <div class="plate-recognition">
    <div class="header">
      <h1>🔢 车牌识别</h1>
      <p class="subtitle">识别车牌号码与位置</p>
      <router-link to="/" class="back-btn">← 返回首页</router-link>
    </div>

    <FileUpload @file-selected="handleFileSelected" />

    <ProgressBar v-if="isProcessing" :progress="progress" />

    <ResultDisplay
        v-if="recognitionResult"
        :result="recognitionResult"
        result-type="plate"
    />

    <StatusFooter :isApiOnline="isApiOnline" :modelInfo="modelInfo" />
  </div>
</template>

<script>
import FileUpload from '@/components/FileUpload.vue'
import ProgressBar from '@/components/ProgressBar.vue'
import ResultDisplay from '@/components/ResultDisplay.vue'
import StatusFooter from '@/components/StatusFooter.vue'
import { PlateRecognitionApi } from '@/services/api'
import { formatFileSize, validateImageFile } from '@/utils/helpers'

export default {
  components: {
    FileUpload,
    ProgressBar,
    ResultDisplay,
    StatusFooter
  },
  data() {
    return {
      selectedFile: null,
      isProcessing: false,
      progress: 0,
      recognitionResult: null,
      error: null,
      isApiOnline: false,
      modelInfo: '检查中...'
    }
  },
  methods: {
    handleFileSelected(file) {
      const validation = validateImageFile(file)
      if (!validation.valid) {
        this.error = validation.error || '文件无效'
        return
      }

      this.selectedFile = file
      this.error = null
      this.uploadAndRecognize()
    },

    async uploadAndRecognize() {
      if (!this.selectedFile) return

      this.isProcessing = true
      this.progress = 0
      this.error = null

      try {
        // 模拟进度
        const progressInterval = setInterval(() => {
          if (this.progress < 90) {
            this.progress += Math.random() * 10
          }
        }, 200)

        // 调用API
        const result = await PlateRecognitionApi.recognizePlate(this.selectedFile)
        clearInterval(progressInterval)
        this.progress = 100

        if (result.success) {
          this.recognitionResult = result
        } else {
          this.error = result.error || '识别失败'
        }

      } catch (err) {
        console.error('识别失败:', err)
        this.error = err.message || '识别过程中发生错误'
      } finally {
        this.isProcessing = false
      }
    },

    async checkApiHealth() {
      try {
        const response = await PlateRecognitionApi.healthCheck()
        this.isApiOnline = true
        this.modelInfo = response.models_loaded ? '已加载' : '未加载'
      } catch (err) {
        this.isApiOnline = false
        this.modelInfo = '连接失败'
      }
    }
  },
  mounted() {
    this.checkApiHealth()
    setInterval(this.checkApiHealth, 30000)
  }
}
</script>

<style scoped>
.plate-recognition {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.header {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

.header h1 {
  font-size: 2.2rem;
  color: #2c3e50;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 1.1rem;
  color: #7f8c8d;
  margin-bottom: 20px;
}

.back-btn {
  position: fixed;
  top: 10px;
  left: 0;
  color: #3498db;
  text-decoration: none;
  font-weight: 500;
}

.back-btn:hover {
  text-decoration: underline;
}
</style>